// 第一部分 技能 介绍
.main-content {

    width: 100%;

    .pageHeader {
        min-height: 39.5833vw;
        padding: 4.1667vw 2.0833vw;
        background: url(https://blz.nosdn.127.net/1/tm/overwatch/ow2heroes/2600-Kiriko.jpg) no-repeat;
        background-position-x: 50%;

        //    左边介绍
        .section {
            display: flex;
            position: relative;
            padding: 10.4167vw .8333vw 2.0833vw .8333vw;

            margin-left: 7.8125vw;
            min-height: 20.8333vw;
            max-width: 37.5vw;
            align-items: center;

            flex-wrap: wrap;

            .section-header {
                .header-name {
                    text-align: left;
                    font-size: 1.875vw;
                    max-width: 52.0833vw;
                    font-weight: 700;
                    color: #fff;
                }

                .header-des {
                    text-align: left;
                    color: rgba(255, 255, 255, .9);
                    margin-top: .8333vw;
                    font-size: .8333vw;
                }
            }

            .mt32 {
                margin-top: 1.6667vw;


            }

            .header-icon {
                display: flex;
                align-items: center;
                margin-bottom: .7813vw;
                max-width: 52.0833vw;
                min-width: 35.8333vw;
                flex-wrap: wrap;
                justify-content: flex-start;

                .img-wrap {
                    display: flex;
                    height: 2.5vw;
                    border-radius: 50%;
                    background-color: rgba(255, 255, 255, .3);
                    justify-content: center;
                    align-items: center;
                    margin-right: .5208vw;
                    width: 2.5vw;

                    img {

                        width: 50%;
                        max-width: 100%;
                        height: auto;

                    }
                }

                p {
                    color: rgba(255, 255, 255, .7);
                    margin-bottom: 0;
                    line-height: .0833vw;
                    font-size: .8333vw;
                }

            }

        }
    }

    // 技能
    .abilities {
        position: relative;
        margin-top: -1.0417vw;
        min-height: 44.2708vw;
        padding: 5.2083vw .8333vw 2.0833vw .8333vw;

        background-image: url(https://blz.nosdn.127.net/1/tm/overwatch/ow2heroes/cloud-2600.jpg);
        margin-top: -19px;
        -webkit-mask-box-image: url(https://blz.nosdn.127.net/1/tm/blz/overwatch/home/Top_Divider-2d39cd814f.svg);
        mask-border: url(https://blz.nosdn.127.net/1/tm/blz/overwatch/home/Top_Divider-2d39cd814f.svg);
        -webkit-mask-box-image-slice: 20 350 fill;
        mask-border-slice: 20 350 fill;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        text-shadow: 0 .2083vw .5208vw rgb(0, 0, 0, .1);
        overflow: hidden;

        .comon-title {
            font-size: 1.875vw;
            max-width: 52.0833vw;
            text-align: center;
            margin: 0 auto 2.5vw;
            color: #fff;
        }

        .ab-list {
            height: 4.8438vw;

            .control {
                display: flex;
                justify-content: center;
                margin-bottom: 1.6667vw;

                display: flex;

                position: relative;

                // 五个技能





                .ab_flex {
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: center;
                    min-height: 4.8438vw;


                    // 符
                    .ab_wrap {
                        display: flex;
                        flex-wrap: wrap;
                        justify-content: flex-start;
                        flex-direction: column;
                        align-items: center;
                        margin: 0 1.0417vw;
                        cursor: pointer;

                        .ab_img {
                            position: relative;
                            display: flex;
                            justify-content: center;
                            align-items: center;
                            height: 3.75vw;
                            width: 3.75vw;
                            margin: 0 .5208vw;
                            border: 2px solid hsla(0, 0%, 100%, .5);
                            border-radius: 50%;

                            img {
                                position: absolute;
                                padding: 15px;
                                width: 2.2917vw;
                                max-width: 100%;
                                height: auto;
                                box-sizing: content-box;

                            }

                            &.active {
                                border-radius: 50%;
                                border: 2px solid hsla(0, 0%, 100%, 1);
                                background-color: rgba(255, 255, 255, .3);
                            }
                        }

                        .ab_name {

                            color: #fff;
                            text-align: center;
                            font-size: .8333vw;
                            font-weight: 700;
                        }
                    }


                }



            }

        }

        //对应技能视频
        .ac {
            display: flex;
            justify-content: center;

            .item {
                display: flex;
                display: none;

                &.active {
                    display: block;
                }

                .ab_detail {
                    display: flex;
                    justify-content: center;
                    flex-wrap: nowrap;
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    max-height: 44.2708vw;
                    z-index: -1;

                    .ab_video {



                        z-index: -1;
                        height: 100%;
                        left: 0px;
                        pointer-events: none;
                        position: absolute;
                        top: -1.0417vw;
                        width: 100%;
                        -o-object-fit: cover;
                        object-fit: cover;

                        video {

                            margin-top: -1.0417vw;
                            min-height: 44.2708vw;
                            z-index: -1;

                        }
                    }



                }

            }

            .ab_des {
                position: absolute;
                left: 86%;
                bottom: 5.2083vw;

                transform: translate(-50%);
                max-width: 90%;
                width: 100%;
                font-size: .8333vw;
                color: #fff;

            }
        }
    }


}







// 第二部分 故事
.story {
    padding: 4.1667vw 2.0833vw;
    margin-top: -19px;
    -webkit-mask-box-image: url(https://blz.nosdn.127.net/1/tm/blz/overwatch/home/Top_Divider-2d39cd814f.svg);
    mask-border: url(https://blz.nosdn.127.net/1/tm/blz/overwatch/home/Top_Divider-2d39cd814f.svg);
    -webkit-mask-box-image-slice: 20 350 fill;
    mask-border-slice: 20 350 fill;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    text-shadow: 0 .2083vw .5208vw rgb(0, 0, 0, .1);
    overflow: hidden;
    background-image: url(https://blz.nosdn.127.net/1/tm/overwatch/ow2heroes/cloud-2600.jpg);


    background-position-y: -36.4583vw;
    z-index: 10;

    .section-story {
        display: flex;
        position: relative;
        max-width: 135.4167vw;

        flex-direction: column;
        min-height: 15.625vw;
        padding: 2.0833vw .8333vw;

        .comon-title {
            font-size: 1.875vw;
            max-width: 52.0833vw;
            text-align: center;
            margin: 0 auto;
            color: #fff;
            font-weight: 400;
        }

        .story_detail {
            margin: 1.0417vw auto 2.0833vw;
            max-width: 37.5vw;
            text-align: center;
            color: #fff;
            font-size: .8333vw;
        }

        .video {
            width: 100%;
            height: 28.125vw;
            max-width: 52.0833vw;
            margin: 0 auto;
            position: relative;

            .hero-showcase-video {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                -o-object-fit: fill;
                object-fit: fill;
                object-fit: cover;
            }
        }
    }

}

// 第三部分
.heroes-content {
    display: flex;
    // justify-content: center;
    // align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    position: relative;

    overflow: hidden;
    color: #fff;
    background-color: #6e93c1;
    -webkit-mask-box-image: url(https://blz.nosdn.127.net/1/tm/blz/overwatch/home/Top_Solid_Divider-66d5db5c53.svg);
    mask-border: url(https://blz.nosdn.127.net/1/tm/blz/overwatch/home/Top_Solid_Divider-66d5db5c53.svg);
    -webkit-mask-box-image-slice: 16 200 fill;
    mask-border-slice: 16 200 fill;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    margin-top: -2.0833vw;
    z-index: 11;

    padding: 4.1667vw 2.0833vw;

    .section-bg {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        left: 0;
    }

    .gl {
        display: block;
        width: 100%;
        height: 100%;
        -webkit-mask-box-image: url(https://blz.nosdn.127.net/1/tm/blz/overwatch/home/Top_Solid_Divider-66d5db5c53.svg);
        mask-border: url(https://blz.nosdn.127.net/1/tm/blz/overwatch/home/Top_Solid_Divider-66d5db5c53.svg);
        -webkit-mask-box-image-slice: 16 200 fill;
        mask-border-slice: 16 200 fill;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        top: .5208vw;
    }

    .comon-title {
        font-size: 1.875vw;
        max-width: 52.0833vw;
        text-align: center;
        font-style: normal;
        margin: 0 auto 2.9167vw;
        font-weight: 400;
    }

    .list-warp {
        padding: .8333vw .8333vw 2.5vw;



        .hero-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-items: flex-start;
            max-width: 72.9167vw;
            width: 100%;
            margin: 0 auto;
            flex-wrap: wrap;

            .hero-card {
                display: flex;
                border: 2px solid #fff;
                border-radius: 2px;

                width: calc(20% - 10px);
                width: calc(16.6% - 1.6667vw);
                margin: 0 .8333vw 1.6667vw;
                box-shadow: 0 2px .5208vw rgba(0, 0, 0, .1);



                background-color: rgba(255, 255, 255, .9);
                position: relative;
                top: 0;
                transition: all .3s;



                .hero-img {
                    position: relative;
                    overflow: hidden;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }

                .hero-name {
                    display: flex;
                    font-size: .8333vw;
                    font-weight: 700;
                    color: rgba(0, 0, 0, .8);
                    margin: .8333vw;
                    justify-content: center;
                    white-space: nowrap;

                    .hero-role {
                        margin-right: .5208vw;
                        max-width: 1.25vw;
                        max-height: 1.25vw;
                        // -webkit-transform: translateY(-8px);
                        // transform: translateY(-8px)
                    }

                    span {
                        text-align: center;
                    }

                }

                &:hover {
                    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
                    transform: scale(1.1);

                }
            }
        }
    }

    .all-heroes {
        background: #fff;
        width: 11.1979vw;
        height: 3.3333vw;
        line-height: 3.3333vw;
        display: inline-block;
        text-align: center;
        color: #000;
        font-size: 1.0417vw;
        font-weight: 700;
        margin: 0 auto;
        cursor: pointer;
        opacity: .9;
    }
}

// 第四部分
.closing-background {
    background-image: url(https://blz.nosdn.127.net/1/tm/blz/overwatch/home/Desktop_Outro_Sky.jpg);
    min-height: 31.9271vw;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 11;

    &::before {
        content: '';
        background: url(https://blz.nosdn.127.net/1/tm/blz/overwatch/home/Desktop_Outro_Characters.png) no-repeat 50% 0/cover;
        width: 100%;
        max-width: 72.9167vw;
        height: calc(100% + 3.125vw);
        display: block;
        position: absolute;
        left: 50%;
        top: -3.125vw;
        transform: translate(-50%);
        z-index: 1;
    }

    .closing {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        max-width: 135.4167vw;
        margin: 0 auto;
        padding: 4.1667vw 2.0833vw;

        .content {
            position: relative;
            max-width: 72.9167vw;
            width: 100%;
            margin: 0 auto;

            .header {
                color: #fff;
                max-width: 37.5vw;
                margin: 0 auto;
                text-align: center;
                padding-top: 10.4167vw;
                z-index: 2;
                width: 100%;
                position: relative;

                .heading {
                    line-height: 3.4375vw;
                    font-size: 3.125vw;
                    margin-bottom: 1.5625vw;
                    font-weight: 700;

                }

                .btn-primary {
                    display: inline-block;
                    background-color: #f06414;
                    position: relative;
                    z-index: 1;
                    padding: 0 2.0833vw;
                    opacity: .9;
                    height: 3.75vw;
                    line-height: 3.75vw;
                    border-radius: 2px;
                    color: #fff;
                    font-weight: 700;

                    font-size: 1.25vw;
                    text-align: center;
                }

            }
        }
    }


}